<!--
 * @Author: pink_dog 1429122698@qq.com
 * @Date: 2024-12-25 09:10:01
 * @LastEditors: pink_dog 1429122698@qq.com
 * @LastEditTime: 2025-04-22 23:41:01
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\index\components\homePageFunctionalModule.vue
 * @Description: 首页的功能模块
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="functionalModule">
    <view class="functionalModule-title">
      <text>学在台职</text>
    </view>
    <view class="functionalModule-container">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="item in items" :key="item" @click="toAppLink(item)">
          <view class="functionItem">
            <image :src="getItemImage(item)" mode="scaleToFill" />
            <text class="text">{{ item.text || '默认名称' }}</text>
          </view>
          
        </uni-grid-item>

      </uni-grid>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserInfo } from '@/stores/userInfo'

const appInfos = useUserInfo().userInfos.appInfos

type functionItem = {
  image: string,
  text: string,
  link?: string
}
/**
 * 当前模块的内容
 */
const items = ref<functionItem[]>([])
/**
 * 组件挂载后获取数据
 */
onMounted(() => {
  items.value = appInfos.map(i=>{
    return {
      image: i.icon,
      url: i.url,
      text: i.appName
    }
  })
  
/*   [
    {
      image: '',
      text: '课题考勤'
    },
    {
      image: '',
      text: '我要请假'
    },
    {
      image: '',
      text: '多场景签到'
    },
    {
      image: '',
      text: '调查统计'
    }
  ] */
})

/**
 * 对没有图片的item设置默认图片
 */
function getItemImage(item:functionItem): string {
  if (item.image&& item.image !== '') { 
    return 'http://116.62.172.200:9999'+item.image
  } else {
    return '/public/image/miniApplicationIcon/defaultIcon.png'
  }
}

function toAppLink (appInfo:any) {
  window.location.href = appInfo.url
}

</script>

<style lang="scss" >
  .functionalModule {
    margin: 64rpx 28rpx 20rpx 34rpx;

   
    
    .functionalModule-title {
      height: 52rpx;
      line-height: 52rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      padding-left: 8rpx;
    }
    .functionalModule-container {
      margin-top: 24rpx;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
      box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(207, 233, 255, 0.17);
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      border: 1rpx solid transparent;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
      overflow: hidden;
      .functionItem {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        image {
          height: 64rpx;
          width: 64rpx;
        }
        text {
          width: 100%;
          text-align: center;
          font-size: 28rpx;
        }
      }
     
    }
  }
</style>